<template>
  <div class="cqSscCheckBall">
<!--     <div class="maincontent margintop10"> -->
    <div class="leftbox wufencaibox">
    <div class="select-area" id="play8">
      <p class="middle tabs level2">
        <label class="tab current">
          <input type="radio" name="g8" class="gametab" checked="checked" value="1">普通投注
        </label> 
        <label class="tab"><input type="radio" class="gametab" name="g8" value="2">单式投注</label>
      </p> 
      <div >
        <div class="select-mode modebox" id="g81">
          <p class="tips">玩法提示：分别从个、十位中前一种性质组成一注投注号码，大奖<span class="red moneytext">4</span>元(积分倍数<span class="red multipletext">0</span>倍)</p>
          <div class="p3-mode shibox">
            <div class="lable"><a class="gs">十&nbsp;&nbsp;位</a></div>
            <div v-for="item in items">
              <a class="ball"
                v-bind:class="selectShiBall(item.ballName)"
                v-on:click="clickShiBall(item.ballName)">
                {{item.ballName}}
              </a>
            </div>
          </div>
          <div class="p3-mode gebox">
            <div class="lable"><a class="gs">个&nbsp;&nbsp;位</a></div>
            <div v-for="item in items">
              <a class="ball"
                v-bind:class="selectGeBall(item.ballName)"
                v-on:click="clickGeBall(item.ballName)">
                {{item.ballName}}
              </a>
            </div>
          </div>
          <p class="betresult">【您选择了<span class="combian-count darkred" id="totalNumB">{{totalNumB}}</span>注，共￥ <span class="total-coast darkred" id="totalPriceB">{{totalMoney}}</span> 元】</p> 
        
          <div class="separator">
            <img :src="c_resultUrl">
          </div> 
          <div class="buttons">
            <a class="confirm" v-on:click="confirm">确认选号<img :src="downUrl"></a> 
            <a class="clean" v-on:click="clearSele">清空选号<img :src="cleanUrl"></a>
          </div>
        </div> 
        <div class="input-mode modebox hidden" id="g82">
          <p class="tips">
            <em>【提醒】</em>
            <span>直接在下面框中输入或粘贴投注内容，最多输入400注。</span> 
            <span>格式样本:&nbsp;<strong>0,1,2,3,4</strong>&nbsp;每注一行</span>
          </p> 
          <textarea type="8"></textarea> 
          <p>【已输入 <span class="num darkred inputNum" id="">0</span> 注，最多输入400注】</p> 
          <div class="separator">
            <img :src="c_resultUrl">
          </div> 
          <div class="buttons">
            <a class="confirm"  v-on:click="confirm">确认选号<img :src="downUrl"></a> 
            <a class="clean" v-on:click="clearSele">清空选号<img :src="cleanUrl"></a>
          </div>
        </div>
      </div>
    </div>
   

    <div class="bet-area">
      <div class="combian-list-box flexbox">
        <div class="combain-list" id="combainlist">
          <div v-for="(item, index) in betBoxItem" v-bind:key="item.id">
            <div class="combain-cell">
              <span class="blue">[大小单双]&nbsp</span>
              <span>{{item.play}}</span><a class="remove" v-on:click="remove(index)">×</a>
            </div>
          </div>
        </div> 
        <div class="todo">
          <a class="radom" v-on:click="randomPlay(1)">机选一注</a> 
          <a class="radom" v-on:click="randomPlay(5)">机选五注</a> 
          <a class="radom" v-on:click="randomPlay(10)">机选十注</a> 
          <a class="clean-selected" v-on:click="cleanSelected()">清空列表</a>
        </div>
      </div> 
      <p class="middle">单倍注数：<span class="darkred" id="totalNum">{{totalBetNum}}</span>注，单倍金额：<span class="darkred" id="multiplePrice">{{haploidBetMoney}}</span>元，
      <input type="text" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')" value="1" id="multiple" v-model.number="multiple">倍，共 <span class="darkred" id="totalPrice">{{totalBetmoney}}</span>元</p>
    </div>
    <div class="buy-area">
      <div class="buy-type-sele">
        <div class="lable">购买方式</div>
          <div class="val">
            <input type="radio" value="0" name="buytype" class="buytype" id="buytype1" checked="checked" v-model="picked">
            <label for="buytype1" class="curosr">代购</label>
            <input type="radio" value="1" name="buytype" class="buytype" id="buytype2" v-model="picked" v-on:click="hemai">
            <label for="buytype2" class="curosr">合买</label>
            <span class="fr tips" v-if="picked === '0'">由购买人自行全额购买彩票</span>
            <span class="fr tips" v-if="picked === '1'">由多人共同出资购买彩票</span>
          </div>
      </div>
            <table class="" id="daigou" v-if="picked === '0'">
              <tbody>
                <tr><td>追号设置</td> 
                  <td>
                    <div class="middle">
                      <input type="checkbox" id="zhuihao" v-model="zhuihao"><label class="curosr" for="zhuihao">追号</label> 
                      <input type="checkbox" id="zhuihaostop" v-model="zhuihaostop"><label class="curosr" for="zhuihaostop">中奖后停止追号</label>
                    </div> 
                    <div id="zhuihaobox" v-if="zhuihao">
                      <select value="0" style="border:1!important" v-model="zhuihaoNum">
                        <option value="5">追5期</option> 
                        <option value="10">追10期</option> 
                        <option value="20">追20期</option> 
                        <option value="30">追30期</option> 
                        <option value="50">追50期</option>
                      </select> 
                      <div class="zh " id="betbox">
                        <div class="middle" v-for="(item, index) in sessionAndMultiple" :key="item.id" v-if="index <zhuihaoNum">
                          <span v-if="index <9">0{{index+1}}.</span>
                          <span v-if="index >=9">{{index+1}}.</span> 
                          <!-- <input type="checkbox" checked="checked" v-on:click="passSession(item)">  -->
                          <input type="checkbox" checked="checked" :value="item.c" v-model="item.c">
                          <span class="period">{{item.s}}期</span>
                          <input type="text" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')" name="multiple" v-model.number="item.m">
                          <span>倍&nbsp;￥{{item.m * haploidBetMoney}}元</span>
                        </div>
                      </div>
                    </div>
                  </td>
                </tr> 
                <tr><td>确认购买</td> 
                  <td><div class="buy-button"><a class="bet-button" v-on:click="bet"></a> 
                  </div> 
                  <p class="middle"><input type="checkbox" value="" name="" checked="checked" v-model="agreed"> 
                    <span>我已阅读并同意<a href="/help/eula.html">《用户合买代购协议》</a></span>
                  </p>
                </td>
              </tr>
            </tbody>
          </table> 
          <table id="hemai" v-if="picked === '1'">
            <tbody><tr>
              <td>合买设置</td> 
              <td>
                <p>我要分为：<input type="text" name="total_num" id="hemaiNum" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')" v-model.number="splitNum">份，
                  每份￥<span class="drakred unit_value">{{preSplitMoney}}</span>元 
                  每份至少<span class="darkred">1.00</span>元</p> 
                  <p class="middle"><span>是否公开：</span> 
                    <input type="radio" name="access" value="1" id="access1" checked="checked"><label for="access1" class="curosr">完全公开</label> 
                    <input type="radio" name="access" value="2" id="access2"><label for="access2" class="curosr">截止后公开</label> 
                    <input type="radio" name="access" value="3" id="access3"><label for="access3" class="curosr">仅跟单人可看</label> 
                    <input type="radio" name="access" value="4" id="access4"><label for="access4" class="curosr">完全保密</label>
                  </p>
                </td>
              </tr> 
              <tr><td>认购设置</td> 
                <td>
                  <div class="buy-button">
                    <a class="bet-button" v-on:click="bet"></a>
                  </div> 
                  <p class="middle">*我要认购：<input type="text" id="rengouNum" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')" v-model="buyNum">份，
                    ￥<span class="darkred" id="rengouPirce">{{buyMoney}}</span>元（<span id="rengouPercentage">{{buyPresent}}</span>%）</p> 
                    <p class="middle">
                      <input type="checkbox" checked="checked" id="isGuaranteed" v-model="baodi">我要保底：<input type="text" name="" id="baodiNum" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')" v-model="baodiNum">份，
                      ￥<span class="darkred" id="baoduPirce">{{baodiMoney}}</span>元（<span id="baodiPercentage">{{baodiPresent}}</span>%）<i></i>
                    </p> 
                    <p class="middle">
                      <input type="checkbox" checked="checked" name="agreed" value="1" v-model="agreed">
                      <label>我已阅读并同意<a href="/help/eula.html">《用户合买代购协议》</a>
                      </label>
                    </p>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
<!--     </div> -->
  </div>
</template>

<script>
  import {baseObj} from '../util/util' 
  import {config} from '../util/util' 

  export default {
    name: 'cqSscCheckBall6',
    props: ['noArrayBall','sessionNo'],
    data () {
      return {
        ssqUrl: '../../static/images/column/ssq.png',
        downUrl: '../../static/images/static/down.png',
        cleanUrl: '../../static/images/static/clean.png',
        c_resultUrl: '../../static/images/static/c-result.png',
        awardDate: '', //领奖时间
        openDate: '', //开奖时间
        items: [],//对象数字，属性ballName,trend
        resultItems: [], //开奖结果数组
        isRed: true,
        isBlue: true,
        limitNum: 400,  //最多投注400条
        betBalls: [],
        betBoxItem:[],//选择五星通选玩法的万、千、百、十、个位球列表
        picked: '0',//代购=0 合买=1
        zhuihao: false,//追号=true
        zhuihaostop: false,//追号中奖停止=true
        noArray: [], //当前期往后50期期号
        zhuihaoNum: '5',//追号期数
        agreed: true,//是否同意代购或者合买协议 true=同意
        multiple: 1,//倍数
        selShiBallsArr: [],//当前选择十位的球数组
        selGeBallsArr: [],//当前选择个位的球数组
        limitSelNum: 10,// 一次只能选择10个数
        totalBetNum: 0,//所有选择总共投注注数
        haploidBetMoney: 0,//单倍投注总金额
        baodi: true,//保底
        splitNum: 1,//分割份数
        buyNum: 1,//购买份数
        baodiNum: 0,//保底份数
        sessionArray: [],//期号 倍数数组
        playType: '0',//玩法大小单双
      }
    },
  methods: {
    ballColor:function(e,i){
      if ("13"=== e && 6 === i) {
        console.log(6 === i);
        return "bg-blue"
      }else{
        return "bg-red"
      }
    },
    //改变选择十位球时样式
    selectShiBall: function(index){
      if (this.selShiBallsArr.indexOf(index)!= -1){
        return "selected";
      }
    },
    //选择(点击)十位数球。和选择球十位数组比较，有就取出来，没有就放进去
    clickShiBall: function(index){
      if(this.selShiBallsArr.length < this.limitSelNum){
        if(this.selShiBallsArr.indexOf(index) === -1){
          this.selShiBallsArr.push(index);
        }else{
          this.selShiBallsArr = this.selShiBallsArr.filter(function(i){ return i != index });
        }
      }else{
        alert("只能选择0到10个球！")
      }
    },
    //改变选择个位球时样式
    selectGeBall: function(index){
      if (this.selGeBallsArr.indexOf(index)!= -1){
        return "selected";
      }
    },
    //选择(点击)个位数球。和选择球个位数组比较，有就取出来，没有就放进去
    clickGeBall: function(index){
      if(this.selGeBallsArr.length < this.limitSelNum){
        if(this.selGeBallsArr.indexOf(index) === -1){
          this.selGeBallsArr.push(index);
        }else{
          this.selGeBallsArr = this.selGeBallsArr.filter(function(i){ return i != index });
        }
      }else{
        alert("只能选择0到10个球！")
      }
    },

    //确认选号
    confirm: function(){
      if(this.totalNumB > 0){
        this.totalBetNum = this.totalBetNum + this.totalNumB;
        this.haploidBetMoney = this.haploidBetMoney + this.totalMoney;
        var shi = this.selShiBallsArr.sort();
        var ge = this.selGeBallsArr.sort();
        var playBall = {
          play: shi.join("") + "," + ge.join(""),
          num: this.totalNumB,
          cost: this.totalMoney,
        };
        var length = this.betBoxItem.length;
        if(parseInt(length+1)>this.limitNum){
          // mui.alert('请分多次投注',document.title, function() {});
          this.calcCost();
          return;
        }else{
          this.betBoxItem.push(playBall);
          this.clearSele();
        }
      }
    },
    //取消选号
    clearSele: function(){
      this.selShiBallsArr = [];
      this.selGeBallsArr = [];
    },
    //随机选号
    randomPlay: function (count) {
      var bs = ['大','小','单','双'];
      for (var i = count; i > 0; i--) {
        var playBall = {
          play: bs[Math.floor(Math.random() * bs.length)]+","+bs[Math.floor(Math.random() * bs.length)],
          num: 1,
          cost: 2
        };
        var length = this.betBoxItem.length;
        if(parseInt(length+1)>this.limitNum){
          // mui.alert('请分多次投注',document.title, function() {});
          this.calcCost();
          return;
        }else{
          this.totalBetNum = this.totalBetNum + 1;
          this.haploidBetMoney = this.haploidBetMoney + 2;
          this.betBoxItem.push(playBall);
        }
      }
    },
    //删除某一（投注）行
    remove: function(index){
      var playBall = this.betBoxItem[index];

      this.totalBetNum = this.totalBetNum - playBall.num;
      this.haploidBetMoney = this.haploidBetMoney - playBall.cost;
      this.betBoxItem.splice(index, 1);
    },
    //清空所有投注行
    cleanSelected: function(){
      this.totalBetNum = 0;
      this.haploidBetMoney = 0;
      this.betBoxItem = [];
      this.multiple = 1;
    },
    hemai: function(){
      this.splitNum = this.totalBetmoney;
      this.baodiNum = this.splitNum - 1;
    },
    bet: function(){
      console.log('倍数::'+this.$store.state.user.user.u);
    
      var length=this.betBoxItem.length;
      if(length==0){
        mui.alert('请选择投注号码','双色球');
        console.log('show::-----'+this.$store.state.user.show);
        return;
      }
      if(this.$store.state.user.user.u==null){
      //      baseObj.openLogin();
            // var directUrl=location.href;
           // directUrl=directUrl.split('#')[0];
           // baseObj.openView('/login.html?redirect='+directUrl)
           return;
         }

      var zhuihao = "0";//追号
      var isStop = "0"; //中奖就停止追号
      var isBaodi = "0"; //保底
      var splitNum = this.splitNum;//分割份数
      var buyNum = this.buyNum;//购买份数
      var baodiNum = this.baodiNum;//保底份数
      var sessionArray = []; //期号倍数
      var betBallArray=[]; //投注球

      var s = this.sessionNo;
      var m = this.multiple;
      var obj = {"s": s,"m": m};
      sessionArray.push(JSON.stringify(obj));
      if(this.picked === '0'){//代购
        if(this.zhuihao){ //追号
          zhuihao = "1";
          if(this.zhuihaoNum >0){
            var se;
            var s;
            var m;
            var obj;
            for (var i = this.sessionAndMultiple.length - 1; i >= 0; i--) {
              se = this.sessionAndMultiple[i];
              if(se.c){
                s = se.s;
                m = se.m;
                obj = {"s": s,"m": m};
                sessionArray.push(JSON.stringify(obj));
              }
            }
          }
          if(this.zhuihaostop){
            isStop="1";
          }
        }
        isBaodi = "0";
        splitNum = 1;
        buyNum = 1;
        baodiNum = 0;
      }else{//合买
        if(isGuaranteed){
          isBaodi = "1";
        }else{//不保底
          baodiNum = 0;
        }
      }
      var playArr=this.betBoxItem;
      for(var i=0;i<playArr.length;i++) {
        var temp=playArr[i];
        var bet=temp.play;
        var obj={"t":this.playType,"b":bet};
        betBallArray.push(JSON.stringify(obj));
      }

      console.log('betBallArray::'+betBallArray);
      // console.log(this.$store.state.user.u);
      console.log(config.request_prefix);
      var map = {};
      map['u'] = this.$store.state.user.user.u;
      console.log("u=="+this.$store.state.user.user.u);
      map['betBallArray'] = '['+betBallArray+']';
      map['sessionArray'] = '['+sessionArray+']';
      map['betType'] = this.picked;//代购
      map['isAddNo'] = zhuihao;//追号
      map['isWinStop'] = isStop;
      map['num'] = splitNum;
      map['buyNum'] = buyNum;
      map['isGuaranteed'] = isBaodi;
      map['isPrivacy'] = '1';
      map['guaranteedNum'] = baodiNum;

      var mw=baseObj.mw(map)
      // mw=mw.replace(/\+/g, "%2b").replace(/\//g, "%2f").replace(/=/g, "%3d");
      console.log(mw);
      this.$http.get('api/api/cqSsc_bet', {
        params: {
          mw: mw
        }
      })
      .then((response) => {
        console.log(response);
        var code = response.data.code;
        var msg = response.data.msg;
        if (code == '200') {
          var result = response.data.data;
          var user = new Object();
          user.money  = result.money;
          user.points = result.point;
          this.$store.commit('changeUser',user);
          this.cleanSelected();
          this.zhuihao = false;
          this.zhuihaostop = false;
          this.sessionArray = [];
        }
        mui.alert(msg);
      })
      console.log("uid---=="+this.$store.state.user.user.uid)
    },
    //获取接口数据：获取具体投注球
    getBetPanel: function(){
      var map = {};
      map['playType'] = '0';
      var mw=baseObj.mw(map);
      this.$http.get('api/api/cqSsc_betPanel',{
        params: {
          mw: mw
        }
      })
      .then((response) => {
        console.log(response.data.code);
        var code = response.data.code;
        if ( '200'=== code ) {
          var result = response.data.data;
          this.items = result.items;
        }
      })
    }
  },
  computed: {
    // 计算属性的 getter
    // 计算每次选择万、千、百、十、个位球时投注注数
    totalNumB: function () { 
      // `this` 指向 vm 实例
      var shi=this.selShiBallsArr.length;
      var ge=this.selGeBallsArr.length;
      return shi*ge;
    },
    //计算每次选择万、千、百、十、个位球时投注金额
    totalMoney: function(){
      return this.totalNumB*2;
    },
    //计算总共投注金额
    totalBetmoney: function(){
      if(this.picked === '0' && this.zhuihao && this.zhuihaoNum >0){
        var totalMultiple = 0;
        for (var i = this.sessionArray.length - 1; i >= 0; i--) {
          if(this.sessionArray[i].c){
                    totalMultiple = totalMultiple + this.sessionArray[i].m;
          }
        }
        return this.haploidBetMoney * (totalMultiple+this.multiple);
      }else{
        return this.haploidBetMoney * this.multiple;
      }
    },
    //每份多少钱
    preSplitMoney: function(){
      return (this.totalBetmoney/this.splitNum).toFixed(2);
    },
    //计算购买金额
    buyMoney: function(){
      return (this.preSplitMoney * this.buyNum).toFixed(2);
    },
    //计算购买百分比
    buyPresent: function(){
      return (100 * this.buyNum/this.splitNum).toFixed(2)
    },
    //计算保底金额
    baodiMoney: function(){
      return (this.preSplitMoney * this.baodiNum).toFixed(2);
    },
    //计算保底百分比
    baodiPresent: function(){
      return (100 * this.baodiNum/this.splitNum).toFixed(2)
    },
    //计算追号投注期号倍数
    sessionAndMultiple: function(){
      this.sessionArray =[];
      this.noArray= this.noArrayBall;
      var num = this.zhuihaoNum;
      var noLength = this.noArray.length;
      if (!isNaN(num) && num <= 50) {
        if( num > noLength){
          num = noLength;
        }
        for(var i=0; i<num ;i++){
        var sessionNo ={
            s: this.noArray[i],//期号
            m: this.multiple, //倍数
            c: true,//是否选择
            // money: sessionNo.m * this.haploidBetMoney,//金额
          }
        this.sessionArray.push(sessionNo);
      }
      }
      return this.sessionArray;
    }
  },
  //侦听器
  watch: {
        //侦听倍数是否输入合法
        multiple: function(){
          if(isNaN(this.multiple)){
            this.multiple = 1;
          }else if((this.multiple.toString()).indexOf(".") != -1){
            this.multiple = Math.floor(this.multiple);
          }
          this.splitNum = this.totalBetmoney;
        },
        //侦听分割总份数是否输入合法
        splitNum: function(){
          if(isNaN(this.splitNum)){
            this.splitNum = this.totalBetmoney;
          }else if((this.splitNum.toString()).indexOf(".") != -1){
            this.splitNum = Math.floor(this.splitNum);
          }
          if(this.splitNum>this.totalBetmoney){
            this.splitNum = this.totalBetmoney;
          }else if(this.splitNum <= 0){
            this.splitNum = 1;
          }
          this.buyNum = 1;
          this.baodiNum = this.splitNum -this.buyNum;
        },
    //侦听购买份数是否输入合法
    buyNum: function(){
      if(isNaN(this.buyNum)){
        this.buyNum = 1;
      }else if((this.buyNum.toString()).indexOf(".") != -1){
        this.buyNum = Math.floor(this.buyNum);
      }
      if(this.buyNum>this.splitNum){
        this.buyNum = this.splitNum;
      }else if(this.buyNum <= 0){
        this.buyNum = 1;
      }else if((this.buyNum + this.baodiNum) > this.splitNum){
        this.baodiNum = this.splitNum - this.buyNum;
      }
    },
    //侦听保底份数是否输入合法
    baodiNum: function(){
      if(isNaN(this.baodiNum)){
        this.baodiNum = this.splitNum - 1;
      }else if((this.baodiNum.toString()).indexOf(".") != -1){
        this.baodiNum = Math.floor(this.baodiNum);
      }
      if(this.baodiNum>this.baodiNum){
        this.baodiNum = this.splitNum - 1;
      }else if(this.baodiNum <= 0){
        this.baodiNum = this.splitNum - 1;
      }else if((this.buyNum + this.baodiNum) > this.splitNum){
        this.buyNum = this.splitNum - this.baodiNum;
      }
    }

  },
  created:function() {
    this.getBetPanel()
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @CHARSET "UTF-8";
  .main-content{margin: 10px auto;}
  .kinds h2 {background: #fcfcfc;text-shadow: 0 1px rgba(255,255,255,0.9);border-bottom: 1px solid #eee;font-size: 13px;line-height: 32px;padding: 0 0 0 15px;font-weight: normal;margin: 10px 0;}
  .kinds-box{}
  .kinds-box .kinds-cell{}
  .kinds-box .kinds-cellnth-child(3n+1){margin-left: 15px;}
  .kinds-box .kinds-cell {float: left;border: 1px solid #f0f0f0;overflow: hidden;background: #fcfcfc;margin: 15px 15px 15px 0;width: 313px;padding: 10px;border-radius: 5px;}

  .kinds-box .kinds-cell .icon {flex: 0 0 90px;width: 90px;}
  .kinds-box .kinds-cell .icon img{width: 60px;}
  .kinds-box .kinds-cell .kind-data-box{width: 210px;float: right;}
  .kinds-box .kinds-cell .kind-data-box h3 {margin: 0 0 7px 0;font-size: 14px;}
  .kinds-box .kinds-cell .kind-data-box h3 .period {color: #ba2636;}
  .kinds-box .kinds-cell .kind-data-box p {text-overflow: ellipsis;overflow: hidden;white-space: nowrap; margin: 0 0 7px 0;font-size: 12px;}
  .kinds-box .kinds-cell .kind-data-box .buttons{overflow: hidden;}
  .kinds-box .kinds-cell .kind-data-box .buttons a {color: white;background: #e60000;font-size: 13px;border-radius: 4px;padding: 0 8px;line-height: 22px;display: block;float: right;margin:5px 5px 0 0;}

  .kinds-menu{width: 190px;float: left;border: 1px solid#bc2218;}
  .kinds-menu h2 {color: white;background: #bc2218;}
  .kinds-menu h2 {font-weight: normal;font-size: 16px;line-height: 41px;text-align: center;margin: 0;}
  .kinds-menu h3 {color: #e60000;padding: 10px;margin: 0;line-height: 27px;font-size: 18px;font-weight: normal;}
  .kinds-menu ul {border-bottom: 1px solid #bc2218;}
  .kinds-menu ul li {margin: 0;padding: 0 0 0 10px;list-style: none;line-height: 31px;}
  .kinds-menu ul li a{color: #444;}
  .kinds-menu ul li.selected {background: #f00000;}
  .kinds-menu ul:last-child {border-bottom: none;}

  .project-list{width: 800px;float: right;}
  .project-list .conditions select {appearance:menulist;-webkit-appearance:menulist;padding: 5px;width: 120px;border: 1px solid #ddd;margin-bottom:0;font-family:Tahoma, "Microsoft YaHei";}
  .project-list .results {margin: 10px 0;}
  .project-list .results table {width: 100%;border-spacing: 0;text-align: center;}
  .project-list .results table thead tr th {line-height: 35px;font-weight: normal;}
  .project-list .results table tbody tr td {height: 35px;}
  .project-list .results table thead tr th:nth-child(5) {text-align: right;}
  .project-list .results table tbody tr td:nth-child(5) {text-align: right;}
  .project-list .results table thead tr th:nth-child(6) {width: 8px;}
  .project-list .results table tbody tr td:nth-child(6) {width: 8px;}
  .project-list .results table thead tr th:nth-child(7) {text-align: left;}
  .project-list .results table tbody tr td:nth-child(7) {text-align: left;}
  .project-list .results table tbody tr td .guard {padding: 2px;margin-left: 3px;}
  .project-list .results table tbody tr td .progress {width: 102px;margin: 3px auto;}
  .project-list .results table tbody tr td .progress .bar {height: 4px;}
  .project-list .results table tbody tr td .detail {width: 51px;line-height: 22px;text-align: center;}
  .project-list .rule {padding: 10px;}
  .project-list .rule dt {float: left;}
  .project-list .rule dd {margin-left: 6em;}
  .project-list .rule p {margin: 0;line-height: 20px;}
  .project-list .rule p img {margin-right: 5px;}
  /** theme **/
  .project-list .results {border: 1px solid #d9d9d9;}
  .project-list .results table thead tr th {border-bottom: 1px solid #e1e1e1;color: #999;}
  .project-list .results table tbody tr td {color: #6c6c6c;}
  .project-list .results table tbody tr:nth-child(2n+2) td {background: #f5f5f5;}
  .project-list .results table tbody tr:hover td {background: #fff7e4;}
  .project-list .results table tbody tr td .guard {background: #F60;color: white;}
  .project-list .results table tbody tr td .progress {border: 1px solid #cccccc;}
  .project-list .results table tbody tr td .progress .bar {background: #bc2218;}
  .project-list .results table tbody tr td .status-3 {color: #ba2636;font-weight: bold;}
  .project-list .results table tbody tr td input[type=text] {width: 40px;border: 1px solid #ddd;text-align: center;background: none;padding: 3px 5px;}
  .project-list .results table tbody tr td .status-1 {font-weight: bold;color: #3f79d0;}
  .project-list .results table tbody tr td .detail {color: white;background: #e60000;}
  .project-list .pager .current {color: red;}
  .project-list .rule {border-top: 1px solid #d9d9d9;background: #f5f5f5;}

  .groupbuy .contents{margin-top: 10px;border: 1px solid #d9d9d9;}
  .groupbuy .contents table tbody tr:nth-child(2n+2) td {background: #f5f5f5;}


  .head-box {background: url(../../static/images/b-top.gif) left -166px repeat-x;height: 88px;position: relative;}
  .head-box .logo {width: 110px;margin-right: 10px;text-align: center;float: left;margin-top: 5px;}
  .head-box .logo img {width: 72px;margin: 0 auto 5px;}
  .head-box .info {flex-grow: 1;width: 500px;float: left;margin-top: 10px;position: absolute;bottom: 0px;left: 120px;}
  .head-box .info .project-period {width: 107px;line-height: 24px;height: 26px;text-align: center;background: url(../../static/images/b-sprit.png) 0 -58px no-repeat;margin: 0 10px 10px;font-weight: bold;display: inline-block;}
  .project-lottery {color: #999;margin-bottom: 15px;font-size: 12px;}
  .project-selling {display: inline-block;width: 50px;height: 13px;background: url(../../static/images/b-sprit.png) 0 -127px no-repeat;margin-bottom: 0px;}

  .info .tab a.current {color: #ba2636;border-top: 2px solid #ba2636;margin-top: 0;background: none;}
  .info .tab a:first-child {border-left-width: 1px;}
  .info .tab a {display: inline-block;float: left;width: 114px;line-height: 32px;text-align: center;border-width: 1px 1px 0 0;border-style: solid;border-color: #eee;background: white;margin-bottom: 4px;margin-top: 1px;color: #333;}
  .project-countdown {line-height: 23px;text-align: right;}
  .project-countdown .countdown {display: inline-block;width: 151px;margin-right: 20px; background: url(../../static/images/top-tips.png) 0 -67px no-repeat;}
  .time{width: 300px;float: right;}
  .time .project-countdown{margin-top: 22px;}
  .time .project-countdown .countdown span {height: 24px;}
  .time .project-countdown-hfl {height: 67px;overflow: hidden;position: relative;width: 394px;background: url(../../static/images/top-tips.png) 0 0 no-repeat;}
  .time .b-top-tips-cur {float: left;padding-left: 16px;padding-top: 17px;width: 120px;}
  .time .b-top-tips-time {float: left;padding-left: 16px; padding-top: 10px;}
  .time .b-top-tips-time strong {color: #ba2636;font: bold 40px Geneva,Helvetica,Tahoma,Arial;}
  .time .zoushi{text-align: right;}
  .time .ma10{padding: 10px 20px;}

  .project-countdown .countdown span {display: inline-block;width: 50px;height: 23px;text-align: center;font-weight: bold;}
  .project-countdown .countdown span em {color: red;}
  .flexbox {display: flex;}

  .leftbox{width: 738px;border-right: 1px solid #ddd;float: left;margin-bottom: 10px;}
  .select-area { }
  .level1 {border-bottom: 1px solid #ccc;background: #f5f5f5;}
  .level1 a.tab{display: inline-block;}
  .level1 .tab {width: 82px;line-height: 32px;text-align: center;border-right: 1px solid #ccc;color: #333;}
  .level1 .tab p {line-height: 1.0em;margin: 0 0 7px 0;color: #717171;}
  .level1 .tab:first-child {border-left: 1px solid #ccc;}
  .level1 .tab.current {background: #ba2636;color: white;}
  .level1 .tab.current p {color: white;}
  .level2 {border-bottom: 1px solid #ddd;margin: 0;line-height: 40px;}
  .select-area .select-mode {padding: 20px 3px 10px;}
  .select-area .select-mode .red-balls {flex: 0 0 420px;margin: 0 25px;width: 420px;float: left;}
  .select-area .select-mode .blue-balls {flex: 0 0 245px;flex-wrap: wrap;width: 245px;float: right;}
  .select-area .red-balls .text {color: #D13B00;background: url(../../static/images/ssq_red.png) 0 11px repeat-x;text-align: center; margin-bottom: 10px;}
  .select-area .red-balls .text strong {background: white;padding: 0 5px;}
  .select-area .red-balls .text span {padding: 0 3px;background: white;font-size: 11px;}
  .select-area .red-balls .ball.selected {background: #e60000;border-color: #e60000;color: white;}
  .select-area .blue-balls .balls .ball.selected {border-color: #3e8be7;background: #3e8be7;color: white;}
  .select-area .select-mode .red-balls .balls {flex-wrap: wrap;}
  .select-area .select-mode .balls > div {float:left;margin-right: 5px;text-align: center;width: 32px;}
  .select-area .select-mode .ball { width: 32px;height: 32px;line-height: 30px;border: 1px solid #ddd;border-radius: 16px;background: #fcfcfc;font-size: 16px;color: #333;}
  .select-area .select-mode .balls span {display: block;line-height: 32px;color: #B1B1B1;font-family: Arial,Helvetica,sans-serif;}
  .select-area .blue-balls .text { color: #086CAE;background: url(../../static/images/ssq_blue.png) 0 11px repeat-x;text-align: center;margin-bottom: 10px;}
  .select-area .blue-balls .text strong {font-size: 14px;background: white;padding: 0 5px;}
  .select-area .blue-balls .text span {padding: 0 3px;background: white;}
  .select-area .buttons { text-align: center;margin: 10px 0;}
  .select-area .buttons a {width: 140px;line-height: 35px;background: #f5f5f5;text-align: center;border: 1px solid #dedede; text-decoration: none;cursor: pointer;color: #666;display: inline-block;outline: none;}
  .select-area .buttons a * {vertical-align: middle;}
  .select-area .buttons a img { margin-left: 5px;}
  .select-area .input-mode{display: none;text-align: center;}
  .select-area .input-mode p em {color: red;font-style: normal;}
  .select-area .input-mode textarea {border: 1px solid #7E9DB9;width: 475px;height: 95px; margin: 10px;padding: 3px 5px;font-size: 14px;line-height: 22px;font-family: Arial,Helvetica,sans-serif;}
  .select-area .input-mode .tips{margin: 10px auto;}
  .select-mode .tips{margin:0 0 20px 20px;}
  .p3-mode{overflow: hidden;}
  .p3-mode > div { margin-right: 9px;float: left;}
  .p3-mode .lable{width: 68px;}
  .p3-mode .gs {line-height: 32px;padding: 0 10px;color: #333;display: block;text-align: center;}
  .p3-mode span {display: block;line-height: 32px;text-align: center;color: gray;}
  .p3-mode .square {line-height: 24px;width: 24px;text-align: center;height: 24px;margin: 4px 0; border: 1px solid #ddd;font-weight: bold;display: block;}
  .select-area .ball.selected {background: #e60000;border-color: #e60000; color: white;}





  .betresult{margin: 10px;text-align: center;}

  .combian-list-box .combain-list {flex: 0 0 538px;width: 538px;height: 143px;margin: 0 20px 0 40px;overflow: auto;border: 1px solid #e0e2e1;}
  .combian-list-box .combain-list .combain-cell {line-height: 30px;border-bottom: 1px dashed #e0e2e1;color: #333;padding-left: 5px;}
  .combian-list-box .combain-list .combain-cell .remove {display: inline-block;width: 28px;text-align: center;color: red;font-weight: bold;font-size: 18px; line-height: 30px;float: right;}

  .bet-area .combian-list-box .todo {flex: 0 0 100px;}
  .bet-area .combian-list-box .todo a {display: block;line-height: 28px;margin-bottom: 8px;border: 1px solid #e0e2e1;color: #333;text-align: center;font-weight: bold;}
  .bet-area p.middle { margin: 0 0 10px 40px;}

  .bet-area p.middle #multiple {height:22px; width: 40px;border: 1px solid rgb(255, 136, 0);background: none;padding: 3px 5px;line-height: 14px; margin: 0 5px;}
  #totalNum,#multiplePrice,#totalPrice{color: #ba2636;padding:0 3px 0 0;}


  .buy-area {margin: 10px 20px;}
  .buy-area table {width: 100%;border-spacing: 0;border: 1px solid #ccc;}
  .buy-area table thead tr th {background: #f5f5f5;font-weight: normal;line-height: 35px;padding: 0 10px 0;}
  .buy-area table thead tr th span {float: right;}
  .buy-area table thead tr th:last-child {text-align: left;}
  .buy-area table tbody tr td {border-top: 1px solid #ccc;padding: 10px;}
  .buy-area table tbody tr td:first-child {background: #f5f5f5;text-align: center;width: 100px;}
  .buy-area .middle *  {margin-top: 0;vertical-align: middle;}
  .buy-area table tbody tr td select {margin-top: 10px;margin-bottom: 10px;width: 100px;padding: 0px; appearance: menulist;-moz-appearance: menulist;-webkit-appearance: menulist;}
  .buy-area table tbody tr td .zh {border: 1px solid #e0e2e1;padding: 5px;height: 150px;overflow: auto;}
  .buy-area table tbody tr td .flexbox {flex-wrap: wrap;}
  .buy-area table tbody tr td .flexbox div {flex: 0 0 50%;padding: 3px 0;}
  .buy-area table tbody tr td input[type=text] {font-size: 14px;width: 50px;background: none;padding: 3px 5px;line-height: 14px;margin-bottom: 0;height: 22px;margin-right: 5px;}
  .buy-area table tbody tr td .buy-button {float: right;text-align: center;margin: 10px;}
  .buy-area table tbody tr td .buy-button .bet-button {background: url("../../static/images/lottery-buttons.png") 0 -180px no-repeat;width: 146px;height: 43px;}
  .buy-area table tbody tr td p{margin: 10px 0;}

  .buy-area .buy-type-sele{height: 44px;line-height: 44px;background: #f5f5f5;border-top: 1px solid #ccc;border-left: 1px solid #ccc;border-right: 1px solid #ccc;padding-right: 10px;}
  .buy-area .buy-type-sele .lable{width: 100px;float: left;text-align: center;}
  .buy-area .buy-type-sele .tips{}
  .buy-button .bet-button {display:block; background: url(../../static/images/lottery-buttons.png) 0 -180px no-repeat;width: 146px;height: 43px;}

  #betbox .middle{width: 50%;float: left;padding: 3px 0;color: #666;}

  .rightbox{width: 250px;float: right;}
  .rightbox .latest{}
  .rightbox .latest .title{color: #333;font-size: 15px;line-height: 25px;font-weight: bold;}
  .rightbox .latest .open-number {margin-top: 20px;text-align: center;height: 35px;font-weight: bold;font-family: Arial,Helvetica,sans-serif;}
  .rightbox .latest .open-number .num{width: 31px;height: 31px;line-height: 31px;}
  .rightbox .latest ul li {margin: 0;padding: 0 0 0 12px; line-height: 24px;list-style: none;color: #717171;background: url(../../static/images/icon.png) -10px -134px no-repeat;}
  .rightbox .darkred {color: #ba2636;font-weight: bold;margin: 0 3px;}
  .latest .open-number .num.loading {animation-duration: 0.15s;animation-iteration-count: infinite;animation-name: spin;animation-timing-function: linear;vertical-align: middle;
    -moz-animation-duration:0.15s;-moz-animation-iteration-count: infinite;-moz-animation-name: spin;-moz-animation-timing-function: linear;  /* Firefox */
    -webkit-animation-duration:0.15s;-webkit-animation-iteration-count: infinite;-webkit-animation-name: spin;-webkit-animation-timing-function: linear;  /* Safari 和 Chrome */
    -o-animation-duration:0.15s;-o-animation-iteration-count: infinite;-o-animation-name: spin;-o-animation-timing-function: linear;
  }


  .win table {border-spacing: 1px;background: #dadada;}
  .win table thead tr th {font-weight: normal;background: white;border: 1px solid #dadada;}
  .win table tbody tr td {background: white;border: 1px solid #dadada;}
  .win table { border: 1px solid #dadada; width: 100%; margin-top: 10px;color: #717171;text-align: center;line-height: 23px;}
  .rightbox .results{margin-top: 10px;}
  .rightbox .results table {width: 100%;border-spacing: 0;line-height: 30px;text-align: center;}
  .rightbox .results table thead tr th { background: #ebebeb;color: #717171;font-weight: normal;}

  .rightbox .results table tbody tr td:nth-child(1) {font-weight: normal;}
  .rightbox .results table tbody tr td {border-bottom: 1px dashed #ddd;}
  .rightbox .results table tbody tr td:nth-child(2), .rightbox .results table tbody tr td:nth-child(3),.rightbox .results table tbody tr td:nth-child(4),.rightbox .results table tbody tr td:nth-child(5),.rightbox .results table tbody tr td:nth-child(6),.rightbox .results table tbody tr td:nth-child(7) {color: #ba2636;}
  .rightbox .results table tbody tr td:nth-child(8) {color: #3f79d0;}

  .rightbox .winning{margin-top: 10px;}
  .rightbox .winning .title{height: 32px;line-height: 32px;color: #111;}
  .rightbox .winning table {width: 100%;border-spacing: 0;line-height: 30px;text-align: center;}
  .rightbox .winning table tr th {background: #ebebeb;color: #717171;font-weight: normal;}
  .rightbox .winning table tbody tr td {border-bottom: 1px dashed #ddd;font-weight: bold;color: #717171;}


/*  .wufencaibox #play8,.wufencaibox #play7,.wufencaibox #play5,.wufencaibox #play4,.wufencaibox #play3,.wufencaibox #play2,.wufencaibox #play1,.wufencaibox #play0{display: none;}*/
  .gd115box #play11,.gd115box #play10,.gd115box #play9,.gd115box #play7,.gd115box #play6,.gd115box #play5,.gd115box #play4,.gd115box #play3,.gd115box #play2,.gd115box #play1,.gd115box #play0{display: none;}

  .groupbuy .contents input{text-indent: 0;font-size: 13px;margin-bottom: 0;padding: 0;text-align: center;}
  .status-2 {font-weight: bold;color: #3f79d0;}
  .status-4 {color: #ba2636;font-weight: bold;}
  .pager{display: none;}

  .guide {margin: 10px 0;line-height: 20px;}
  .project-info .head {position: relative; background: url(../../static/images/b-top.gif) left -166px repeat-x;height: 77px;border-bottom: 3px solid #ba2636;margin-bottom: 10px;align-items: flex-end;}
  .project-info .head .project-logo {width: 110px;text-align: center;overflow: hidden;}
  .project-info .head .project-logo img {width: 60px;margin-top: 30px;}
  .project-info .head .project-detail p.kind {font-size: 20px;line-height: 1.0em;margin: 12px 0;font-family:"宋体"}
  .project-info .head .project-detail p {line-height: 1.0em;margin: 12px 0;}
  .project-info .head .project-period {font-size:12px;float:right; margin: 12px 20px;width: 107px;line-height: 24px;height: 26px;text-align: center;background: url(../../static/images/b-sprit.png) 0 -58px no-repeat;margin: 0 10px 10px;display: inline-block;right: 0;position: absolute;}
  .project-info .info .organizer {flex: 0 0 228px;padding: 5px;}
  .project-info .info .organizer .level {margin-bottom: 27px;line-height: 20px;}
  .project-info .info .organizer .level img {width: 62px;margin-right: 10px;}
  .project-info .info .organizer > div {line-height: 24px;}
  .project-info .info .detail {flex-grow: 1;margin: 0;}
  .project-info .info .detail > div {line-height: 18px;margin: 10px 0;vertical-align: middle;}
  .project-info .info .detail .progress {display: inline-block;background: url(../../static/images/btn_repeat.png) repeat-x 0 -197px; width: 380px;}
  .project-info .info .detail .progress .bar {background: url(../../static/images/btn_repeat.png) repeat-x 0 -235px;text-align: center;color: white; height: 18px;}
  .project-info .info .detail .win {color: red;}

  .project-info .info .detail .flexbox > div:first-child {border-left: none;}
  .project-info .info .detail .flexbox > div {flex: 0 0 135px;border-left: 1px solid #d7d7d7;line-height: 21px;padding: 5px 0 5px 17px;}
  .project-info .info .detail .flexbox > div strong {font-size: 16px;}
  .project-info .play {text-align: center;color: #717171;border: 1px solid #ececec;}
  .project-info .play .title {background: #f7f7f7;line-height: 40px;}
  .project-info .play .combian {line-height: 24px;padding: 15px;letter-spacing: 2px;}

  .project-info .playbox .buttons {margin: 10px 0;}
  .project-info .playbox .buttons a.buy2{    color: rgb(250, 221, 222);text-align: center; background: rgb(216, 27, 33);font-size: 16px;line-height: 35px;width: 120px;height: 35px;display: inline-block;}
  .project-info .playbox input[type=text] {height: 44px;width: 146px;font-size: 22px;text-align: center;}
  .project-info .playbox .lottery-button {background: url("../../static/images/lottery-buttons.png") 0 -594px no-repeat;width: 146px;height: 44px;text-indent: -10000px;display: inline-block;}
  .project-info .playbox .lottery-button.buy {background-position: 0 -179px;}
  .project-info .playbox .lottery-button.buy:hover {background-position: 0 -224px;}
  .project-info .playbox .lottery-button.status-6 {background-position: 0 -268px;}
  .project-info .playbox .lottery-button.status-2 {background-position: 0 -312px;}
  .project-info .playbox .lottery-button.status-3 {background-position: 0 -312px;}
  .project-info .playbox .buttons{text-align: center;}
  .project-info .playbox .buttons * {vertical-align: middle;}
  .project-info .playbox .more {margin: 10px 0;text-align: center;}
  .project-info .playbox input[type=text] { height: 44px;width: 146px;font-size: 22px;text-align: center;margin-bottom: 0;}

  .project-info .player .tabs { border-bottom: 3px #ba2636 solid;}
  .project-info .player .tabs .tab.current { color: white;background: #ba2636;}
  .project-info .player .tabs .tab {border-style: solid;border-color: #dedede;border-width: 1px 1px 0 0;line-height: 30px;width: 100px;text-align: center;color: #666;font-size: 14px;display: inline-block;}
  .project-info .player table {width: 100%;text-align: center;line-height: 35px;border-spacing: 0;}
  .project-info .player table thead tr th {background: #f7f7f7;line-height: 30px; color: #717171;}



  .conditions {padding: 10px;border: 1px solid #ddd;}
  .conditions select { appearance: menulist; -webkit-appearance: menulist;padding: 5px; width: 120px;border: 1px solid #ddd;margin-bottom: 0;font-size: 13px;font-family: Tahoma, "Microsoft YaHei";}
  .conditions input[type=text]{margin: 0;width: 120px;padding: 5px;height: 30px;font-size: 13px;}
  .conditions .search{width: 60px;text-align: center;color: #fff;background-color: #e60000;display: inline-block;border-radius: 3px;line-height: 28px;}

  .mybuy{border: 1px solid #ddd;border-top: none;margin-bottom: 10px;}
  .mybuy table {width: 100%;border-spacing: 0;text-align: center;}
  .mybuy table thead tr th {border-bottom: 1px solid #ebedec;background: #f3f2f2;color: #717171;line-height: 34px;font-size: 12px;font-weight: 200;}
  .mybuy table tbody tr td {border-bottom: 1px solid #ddd;line-height: 36px;font-size: 12px;}

</style>
